<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户登录</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
  <link rel="stylesheet" href="../../styles/common.css">
  <link rel="stylesheet" href="../../styles/icon/iconfont.css" />
  <style>
    .body{
      min-width: 1366px;
    }

    .app{
      background-color: #333;
      width: 100%;
      height: 100%;
      background-color: #333;
      position: fixed;

    }
    .login{
      width: 1000px;
      height: 480px;
      background-color: white;
      border-radius: 10px;
      position: absolute;
      margin-top: 150px;
      margin-left: 270px;
    }
  </style>
</head>

<body>
<div class="app" id="app">

  <div class="login" id="login-app" style="position: relative">

    <img style=" width: 60%;height:100%;" src="../../images/beijin.png"/>
    <img src="../../images/login/logo7.png" style="width:25%;height:35%; position:absolute;margin-left: 80px" alt="" />

    <el-form :model="loginForm" ref="loginForm" label-width="100px" class="demo-ruleForm">

      <el-form-item
              style="width: 40%;margin-top: -280px;margin-left: 580px;"
              label="账号"
              prop="username"
              :rules="[
                { required:true, message: '账号不能为空'},
          <!--      { type: 'number', message: '年龄必须为数字值'}-->
              ]"
      >
        <el-input v-model.number="loginForm.username" autocomplete="off"  prefix-icon="iconfont icon-user" ></el-input>
      </el-form-item>


      <el-form-item
              style="width: 40%;margin-left: 580px;"
              label="密码"
              prop="password"
              :rules="[
                {required:true, message: '密码不能为空2'},
          <!--      { type: 'number', message: '年龄必须为数字值'}-->
              ]"
      >
        <el-input type="password" v-model.number="loginForm.password" autocomplete="off" prefix-icon="iconfont icon-lock" type="password" ></el-input>
      </el-form-item>

      <el-form-item
              style="margin-left: 630px;"
      >
        <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
        <el-button @click="resetForm('loginForm')">重置</el-button>
      </el-form-item>

    </el-form>
  </div>




</div>


  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="../../plugins/vue/vue.js"></script>
  <!-- 引入组件库 -->
  <script src="../../plugins/element-ui/index.js"></script>
  <!-- 引入axios -->
  <script src="../../plugins/axios/axios.min.js"></script>

<script>

  new Vue({
    el: '#app',
    data:{
      loginForm: {},

    },

    methods: {
      submitForm(loginForm) {
        console.log(this.loginForm)
        axios.post("/users/login",this.loginForm).then((res)=>{
          this.$message.success(res.data.msg);

          if(res.data.code){
            localStorage.setItem('userInfo',JSON.stringify(res.data))
            window.location.href='../user/index.html';
            alert(res.data.msg)
            this.$message.success(res.data.msg);
          }else {
            alert(res.data.msg)
            window.location.href='login_user.html';
            this.$message.error(res.data.msg);
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }

    }
  })
</script>
</body>

</html>
